<template>
    <view :style="{ '--color': color }">
        <view class="Wrapper" v-if="open_group == 1">
            <text class="Title">立即支付，即可开团</text>
            <view class="Boxs">
                <view class="list">
                    <view class="userBox">
                        <image :src="$imgUrls(pageData.headImg)" mode="aspectFill" class="user_head"></image>
                    </view>
                    <view class="listTxt">待支付</view>
                </view>
                <view class="lists">
                    <text class="icon-gengduo1 iconfont"></text>
                </view>
            </view>
        </view>

        <view class="Wrapper" v-if="group_id && pageData.groupUsers">
            <view class="d-flex a-center" v-if="pageData.missPeople > 0">
                <text class="color_33 size32">还差</text>
                <text class="color size32">2</text>
                <text class="color_33 size32">人即可成团</text>
            </view>
            <text class="Title" v-else>已满员</text>
            <view class="Boxs">
                <view class="list" v-for="(item, index) in pageData.groupUsers" :key="index">
                    <view class="userBox">
                        <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="user_head"></image>
                    </view>
                    <view class="listTxt" v-if="item.v_id == pageData.main_v_id">团长</view>
                </view>

                <view class="lists" v-if="pageData.missPeople > 0">
                    <text class="icon-gengduo1 iconfont"></text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        props: ['pageData', 'open_group', 'group_id'],
        data() {
            return {}
        },
        methods: {},
        computed: {
            ...mapState(['color'])
        }
        // watch: {
        //     group_id: {
        //         immediate: true,
        //         handler(newVal) {
        //             console.log(newVal, 'group_id')
        //         }
        //     },
        //     pageData: {
        //         immediate: true,
        //         handler(newVal) {
        //             console.log(newVal, 'pageData')
        //         }
        //     }
        // }
    }
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 710rpx;
        background-color: #ffffff;
        padding: 24rpx;
        margin: 20rpx auto 0;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        .Title {
            color: #333;
            font-size: 32rpx;
        }
        .Boxs {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .list {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-right: 40rpx;
                margin-top: 24rpx;
                .userBox {
                    width: 110rpx;
                    height: 110rpx;
                    position: relative;
                    overflow: hidden;
                    .user_head {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .listTxt {
                    display: inline-block;
                    padding: 0 14rpx;
                    background-color: var(--color);
                    color: #fff;
                    margin: -20rpx auto 0;
                    position: relative;
                    z-index: 10;
                    border-radius: 16rpx;
                }
            }
            .lists {
                width: 110rpx;
                height: 110rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 24rpx;
                .icon-gengduo1 {
                    font-size: 120rpx;
                    color: #dedede;
                }
            }
        }
    }
</style>